<template>
  <div class="root">
    <div class="header">
      <div>
        <router-link to="/">首页</router-link>
      </div>
      <!-- <div></div> -->
      <div>
        <router-link to="/publisharticles">
          <img src="../assets/img/f1/article.png" alt="" />
          <span>发布文章</span>
        </router-link>
      </div>
    </div>
    <div class="head">
      <div class="icon">
        <img :src="ulogo" />
      </div>
      <div class="userinfo">
        <div>{{ unickname }}</div>
        <span
          ><span>{{ newscount }}</span
          >新闻</span
        >
        <span
          ><span>{{ commentcount }}</span
          >评论</span
        >
      </div>
    </div>
    <div class="foot">
      <div class="article">
        <div
          class="title"
          :class="actived == 1 ? 'actived' : ''"
          @click="changetype(1)"
        >
          已发布文章
        </div>
      </div>
      <div class="comments">
        <div
          class="title"
          :class="actived == 2 ? 'actived' : ''"
          @click="changetype(2)"
        >
          发出的评论
        </div>
      </div>
      <div class="item">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      actived: 1,
      uid: 0, //用户id，暂时写死
      newscount: 0,
      commentcount: 0,
      unickname: "",
      ulogo: "https://p3.toutiaoimg.com/img/3793/3131589739~0x0.image",
    };
  },
  methods: {
    changetype(x) {
      this.actived = x;
      if (x == 1) {
        // this.$router.push(`/userpage/mynews?uid=${this.uid}`);
        this.$router.push(`/userpage/mynews`);
      } else {
        // this.$router.push(`/userpage/mycomments?uid=${this.uid}`);
        this.$router.push(`/userpage/mycomments`);
      }
    },
  },
  created() {
    // this.uid = this.$route.query.uid;//uid获取：从url中
    this.uid = this.$store.state.uid; //uid获取：从session中
    this.changetype(2);
    setTimeout(() => {
      this.changetype(1);
    }, 100);
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: 40px;
  background-color: #90080e;
  display: flex;
  justify-content: space-between;
  > div {
    align-self: center;
  }
  > div:first-child > a {
    color: #fff;
    font-size: 16px;
    margin-left: 10px;
    cursor: pointer;
  }
  > div:last-child {
    display: flex;
    > a:first-child {
      display: flex;
      align-items: center;
      cursor: pointer;
      > img {
        margin-top: 2px;
        margin-right: 2px;
      }
    }
    > a {
      font-size: 16px;
      color: #fff;
      margin-right: 15px;
    }
  }
}
.head {
  box-sizing: border-box;
  width: 100%;
  height: 150px;
  padding: 160px 430px;
  margin-bottom: 0px;
  background: url("https://lf3-cdn2-tos.bytescm.com/toutiao/toutiao_web_pc/imgs/bg.580ac401.png");
  background-size: 100% 100%;
  display: flex;
  .el-upload__textP {
    border: 2px solid #000;
  }
  > .icon {
    width: 106px;
    height: 106px;
    overflow: hidden;
    border: 1px solid white;
    border-radius: 50%;
    > img {
      width: 100%;
    }
  }
  > .userinfo {
    margin-left: 50px;
    margin-top: 10px;
    > div {
      font-size: 24px;
      font-weight: bold;
      line-height: 34px;
      color: #222;
      margin-bottom: 10px;
    }
    > span {
      padding-right: 50px;
      > span {
        font-size: 24px;
        font-weight: bold;
        line-height: 34px;
        color: #222;
      }
    }
  }
}
.actived {
  color: red;
  border-bottom: 2px solid red;
  white-space: nowrap;
}
.foot {
  display: flex;
  margin-top: -50px;
  margin-left: 450px;
  > .comments {
    margin-left: 40px;
  }
  > .item {
    margin-top: 70px;
    margin-left: -220px;
  }
  .title {
    font-size: 18px;
    line-height: 50px;
    color: #222;
    cursor: pointer;
  }
}
</style>
